<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <!-- 基础信息 -->
      <a-card :bordered="false" style="margin-top:24px">
        <div class="card-title">基础信息</div>
        <a-descriptions :column="2" class="teroer1">
          <a-descriptions-item label="客户名称">{{form.custName || '--'}}</a-descriptions-item>
          <template>
            <a-descriptions-item
              v-if="form.orderType === 'DOMESTIC_TRADE_EXPORTS'"
              label="订单类型"
            >内贸出口订单</a-descriptions-item>
            <a-descriptions-item
              v-else-if="form.orderType === 'DOMESTIC_TRADE_IMPORTS'"
              label="订单类型"
            >内贸进口订单</a-descriptions-item>
            <a-descriptions-item
              v-else-if="form.orderType === 'FOREIGN_TRADE_EXPORTS'"
              label="订单类型"
            >外贸出口订单</a-descriptions-item>
            <a-descriptions-item
              v-else-if="form.orderType === 'FOREIGN_TRADE_IMPORTS'"
              label="订单类型"
            >外贸进口订单</a-descriptions-item>
            <a-descriptions-item
              v-else-if="form.orderType === 'UNITED_TRANSPORT_EXPORTS'"
              label="订单类型"
            >联运出口订单</a-descriptions-item>
            <a-descriptions-item
              v-else-if="form.orderType === 'UNITED_TRANSPORT_IMPORTS'"
              label="订单类型"
            >联运进口订单</a-descriptions-item>
          </template>
          <a-descriptions-item label="箱型">
            <template
              v-for="(v) in containerList"
            >{{v.id === form.containerTypeId ? `${v.name}` : ``}}</template>
          </a-descriptions-item>
          <a-descriptions-item label="箱量">
            {{form.containerNum}}
            <a
              @click="editContainerNo"
              style="margin-left:12px;border:1px solid #1890ff;padding:0 10px;border-radius:5px"
            >填写箱号、封号</a>
            <!-- <a-button type="primary" size="small" ghost></a-button> -->
          </a-descriptions-item>
          <a-descriptions-item label="货名">{{form.goodsName || '--'}}</a-descriptions-item>
          <a-descriptions-item
            label="是否开票"
          >{{form.invoiceType === '1' ? `增值税专用发票` : `增值税普通发票`}}&nbsp;&nbsp;&nbsp;&nbsp;{{form.taxRate}}%</a-descriptions-item>
          <a-descriptions-item label="结算类型">{{checkSettlementTypeName(form.settlementType)}}</a-descriptions-item>
          <a-descriptions-item label="操作员">{{form.handler || '--'}}</a-descriptions-item>
          <a-descriptions-item label="所属销售">{{form.seller || '--'}}</a-descriptions-item>
          <a-descriptions-item></a-descriptions-item>
        </a-descriptions>
      </a-card>
      <!-- 运输信息 -->
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-card :bordered="false">
          <div class="card-title">运输信息</div>
          <a-form-item
            label="运输条款"
            :label-col="{span:3}"
            :wrapper-col="{span:21}"
            prop="transportTerms"
          >
            <template>
              <a-button v-if="form.transportTerms === 'DO-DO'" type="primary" size="large">门到门</a-button>
              <a-button v-else-if="form.transportTerms === 'DO-CY'" type="primary" size="large">门到港</a-button>
              <a-button v-else-if="form.transportTerms === 'CY-DO'" type="primary" size="large">港到门</a-button>
              <a-button v-else-if="form.transportTerms === 'CY-CY'" type="primary" size="large">港到港</a-button>
            </template>
          </a-form-item>
          <template>
            <!-- 门到门 -->
            <div v-if="form.transportTerms=== 'DO-DO'" class="borderframe">
              <!-- 起运信息 -->
              <div class="border">
                <a-row>
                  <a-col :span="3" class="YunSHU">
                    <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                    <div>起运信息</div>
                  </a-col>
                  <a-col :span="9">
                    <a-form-item label="起运港">
                      <template
                        v-for="(v) in portList"
                      >{{v.id === form.startPortId ? `${v.name}` : ``}}</template>
                    </a-form-item>
                    <a-form-item label="联系人" style="margin-top:44px;">
                      <span>{{form.consignor}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="发货地址">
                      <span>{{`${form.consignorProvince} ${form.consignorCity} ${form.consignorArea} | ${form.consignorAddress}`}}</span>
                    </a-form-item>
                    <a-form-item label="联系电话">
                      <span>{{form.consignorPhone}}</span>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 目的信息 -->
              <div class="border">
                <a-row>
                  <a-col :span="3" class="YunSHU">
                    <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                    <div>目的信息</div>
                  </a-col>
                  <a-col :span="9">
                    <a-form-item label="目的港">
                      <template
                        v-for="(v) in portList"
                      >{{v.id === form.endPortId ? `${v.name}` : ``}}</template>
                    </a-form-item>
                    <a-form-item label="联系人" style="margin-top:44px;">
                      <span>{{form.consignee}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="收货地址">
                      <span>{{`${form.consigneeProvince} ${form.consigneeCity} ${form.consigneeArea} | ${form.consigneeAddress}`}}</span>
                    </a-form-item>
                    <a-form-item label="联系电话">
                      <span>{{form.consigneePhone}}</span>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </div>
            <!-- 门到港 -->
            <div v-else-if="form.transportTerms=== 'DO-CY'" class="borderframe">
              <!-- 起运信息 -->
              <div class="border">
                <a-row>
                  <a-col :span="3" class="YunSHU">
                    <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                    <div>起运信息</div>
                  </a-col>
                  <a-col :span="9">
                    <a-form-item label="起运港">
                      <template
                        v-for="(v) in portList"
                      >{{v.id === form.startPortId ? `${v.name}` : ``}}</template>
                    </a-form-item>
                    <a-form-item label="联系人" style="margin-top:44px;">
                      <span>{{form.consignor}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="发货地址">
                      <span>{{`${form.consignorProvince} ${form.consignorCity} ${form.consignorArea} | ${form.consignorAddress}`}}</span>
                    </a-form-item>
                    <a-form-item label="联系电话">
                      <span>{{form.consignorPhone}}</span>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 目的信息 -->
              <div class="border">
                <a-row>
                  <a-col :span="3" class="YunSHU">
                    <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                    <div>目的信息</div>
                  </a-col>
                  <a-col :span="9">
                    <a-form-item label="目的港">
                      <template
                        v-for="(v) in portList"
                      >{{v.id === form.endPortId ? `${v.name}` : ``}}</template>
                    </a-form-item>
                    <a-form-item label="联系人" style="margin-top:44px;">
                      <span>{{form.consignee}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="收货人抬头">
                      <span>{{form.consigneeTitle}}</span>
                    </a-form-item>
                    <a-form-item label="联系电话" style="margin-top:44px;">
                      <span>{{form.consigneePhone}}</span>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </div>
            <!-- 港到门 -->
            <div v-else-if="form.transportTerms=== 'CY-DO'" class="borderframe">
              <!-- 起运信息 -->
              <div class="border">
                <a-row>
                  <a-col :span="3" class="YunSHU">
                    <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                    <div>起运信息</div>
                  </a-col>
                  <a-col :span="9">
                    <a-form-item label="起运港">
                      <template
                        v-for="(v) in portList"
                      >{{v.id === form.startPortId ? `${v.name}` : ``}}</template>
                    </a-form-item>
                    <a-form-item label="联系人" style="margin-top:44px;">
                      <span>{{form.consignor}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="联系电话">
                      <span>{{form.consignorPhone}}</span>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 目的信息 -->
              <div class="border">
                <a-row>
                  <a-col :span="3" class="YunSHU">
                    <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                    <div>目的信息</div>
                  </a-col>
                  <a-col :span="9">
                    <a-form-item label="目的港">
                      <template
                        v-for="(v) in portList"
                      >{{v.id === form.endPortId ? `${v.name}` : ``}}</template>
                    </a-form-item>
                    <a-form-item label="联系人" style="margin-top:44px;">
                      <span>{{form.consignee}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="收货地址">
                      <span>{{`${form.consigneeProvince} ${form.consigneeCity} ${form.consigneeArea} | ${form.consigneeAddress}`}}</span>
                    </a-form-item>
                    <a-form-item label="联系电话">
                      <span>{{form.consigneePhone}}</span>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </div>
            <!-- 港到港 -->
            <div v-else-if="form.transportTerms=== 'CY-CY'" class="borderframe">
              <!-- 起运信息 -->
              <div class="border">
                <a-row>
                  <a-col :span="3" class="YunSHU">
                    <img src="@@/images/icon-start.png" alt style="margin-bottom:8px;" />
                    <div>起运信息</div>
                  </a-col>
                  <a-col :span="9">
                    <a-form-item label="起运港">
                      <template
                        v-for="(v) in portList"
                      >{{v.id === form.startPortId ? `${v.name}` : ``}}</template>
                    </a-form-item>
                    <a-form-item label="联系人" style="margin-top:44px;">
                      <span>{{form.consignor}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="联系电话" style="margin-top:84px;">
                      <span>{{form.consignorPhone}}</span>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
              <!-- 目的信息 -->
              <div class="border">
                <a-row>
                  <a-col :span="3" class="YunSHU">
                    <img src="@@/images/icon-end.png" alt style="margin-bottom:8px;" />
                    <div>目的信息</div>
                  </a-col>
                  <a-col :span="9">
                    <a-form-item label="目的港">
                      <template
                        v-for="(v) in portList"
                      >{{v.id === form.endPortId ? `${v.name}` : ``}}</template>
                    </a-form-item>
                    <a-form-item label="联系人" style="margin-top:44px;">
                      <span>{{form.consignee}}</span>
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="收货人抬头">
                      <span>{{form.consigneeTitle}}</span>
                    </a-form-item>
                    <a-form-item label="联系电话" style="margin-top:44px;">
                      <span>{{form.consigneePhone}}</span>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </div>
          </template>
          <a-row :gutter="[20]" style="margin-top:20px">
            <a-col :span="12">
              <a-form-item label="装货时间" :label-col="{span:6}" :wrapper-col="{span:18}">
                <span>{{form.loadingTime || '--'}}</span>
              </a-form-item>
              <a-form-item label="备注" :label-col="{span:6}" :wrapper-col="{span:18}">
                <span>{{form.sellerRemark || '--'}}</span>
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form>
      <!-- 费用信息 -->
      <a-card :bordered="false">
        <div class="card-title">费用信息</div>
        <!-- 应收 -->
        <div class="iconTextMix">
          <img src="@@/images/icon-s.png" alt />
          <span>应收</span>
        </div>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="应收客户（元/箱）" prop="receivableCustAmount">
              <a-row>
                <a-col :span="16">
                  <a-input-number
                    :min="0"
                    v-model="form.receivableCustAmount"
                    :precision="2"
                    @blur="moneyChange"
                    style="width:100%"
                  />
                </a-col>
                <a-col :span="8" style="padding-left:8px;">
                  <a-select v-model="form.receivableCustCurrency" @select="moneyChange">
                    <a-select-option value="CNY">CNY</a-select-option>
                    <a-select-option value="USD">USD</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="form.orderType === 'DOMESTIC_TRADE_IMPORTS'">
          <a-col :span="12">
            <a-form-model-item label="应收海船费用(元/箱)">
              <a-input-number
                :min="0"
                v-model="form.receivableShipAmount"
                :precision="2"
                @blur="moneyChange"
                style="width:100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="海船公司">
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.receivableShipId"
                @search="onSearch2"
              >
                <a-select-option v-for="d in receiveList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 应付 -->
        <div class="iconTextMix">
          <img src="@@/images/icon-f.png" alt />
          <span>应付</span>
        </div>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="应付海船费用(元/箱)" prop="payableShipAmount">
              <a-row>
                <a-col :span="16">
                  <a-input-number
                    :min="0"
                    :max="999999999999.99"
                    :precision="2"
                    v-model="form.payableShipAmount"
                    @blur="moneyChange"
                    style="width:100%"
                  />
                </a-col>
                <a-col :span="8" style="padding-left:8px;">
                  <a-select v-model="form.payableShipCurrency" @select="moneyChange">
                    <a-select-option value="CNY">CNY</a-select-option>
                    <a-select-option value="USD">USD</a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item label="始拖车费（元/箱）" prop="payableStartTruckAmount">
              <a-input-number
                :min="0"
                :precision="2"
                v-model="form.payableStartTruckAmount"
                @blur="moneyChange"
                style="width:100%"
              />
            </a-form-model-item>
            <a-form-model-item label="终拖车费（元/箱）" prop="payableEndTruckAmount">
              <a-input-number
                :min="0"
                :precision="2"
                v-model="form.payableEndTruckAmount"
                @blur="moneyChange"
                style="width:100%"
              />
            </a-form-model-item>
            <a-form-model-item label="保险费（元/箱）">
              <div class="clickOnlyInput" @click="showModal">{{calcResult}}</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="海船公司" prop="payableShipId">
              <!-- <a-auto-complete
                :value="form.payableShipId ? form.payableShipId.toFixed(0) : form.payableShipId"
                @select="onSelect3"
                @search="onSearch3"
                :allowClear="true"
              >
                <template slot="dataSource">
                  <a-select-option
                    v-for="(record,index) in payList"
                    :key="index"
                    :value="record.id.toFixed(0)"
                  >{{ record.name }}</a-select-option>
                </template>
              </a-auto-complete>-->
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.payableShipId"
                @search="onSearch3"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option v-for="d in payList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="始拖车公司" prop="payableStartTruckId">
              <!-- <a-auto-complete
                :value="form.payableStartTruckId ? form.payableStartTruckId.toFixed(0) : form.payableStartTruckId"
                @select="onSelect4"
                @search="onSearch3"
              >
                <template slot="dataSource">
                  <a-select-option
                    v-for="(record,index) in payList"
                    :key="index"
                    :value="record.id.toFixed(0)"
                  >{{ record.name }}</a-select-option>
                </template>
              </a-auto-complete>-->
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.payableStartTruckId"
                @search="onSearch3"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option v-for="d in payList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="终拖车公司" prop="payableEndTruckId">
              <!-- <a-auto-complete
                :value="form.payableEndTruckId ? form.payableEndTruckId.toFixed(0) : form.payableEndTruckId"
                @select="onSelect5"
                @search="onSearch3"
              >
                <template slot="dataSource">
                  <a-select-option
                    v-for="(record,index) in payList"
                    :key="index"
                    :value="record.id.toFixed(0)"
                  >{{ record.name }}</a-select-option>
                </template>
              </a-auto-complete>-->
              <a-select
                show-search
                :show-arrow="false"
                :filter-option="false"
                :default-active-first-option="false"
                :not-found-content="null"
                v-model="form.payableEndTruckId"
                @search="onSearch3"
              >
                <a-select-option value>请选择</a-select-option>
                <a-select-option v-for="d in payList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- 毛利 -->
        <div class="iconTextMix">
          <img src="@@/images/icon-s.png" alt />
          <span>毛利</span>
        </div>
        <a-list class="calcList calcList_1" :grid="{ column: 4 }">
          <a-list-item>
            <a-card title="总应收（元/箱）">
              ¥
              <span class="moneyCss">{{totalReceive.toFixed(2)}}</span>
            </a-card>
          </a-list-item>
          <a-list-item class="sale_yf">
            <a-card title="总应付（元/箱）">
              ¥
              <span class="moneyCss">{{totalPay.toFixed(2)}}</span>
            </a-card>
          </a-list-item>
          <a-list-item class="sale_ml">
            <a-card title="毛利（元/箱）">
              ¥
              <span class="moneyCss">{{totalProfit.toFixed(2)}}</span>
            </a-card>
          </a-list-item>
        </a-list>
      </a-card>
      <!-- 合同 -->
      <a-card :bordered="false">
        <div class="card-title">货物托运委托书</div>
        <viewer
          v-if="form.contractPics"
          :images="form.contractPics.split(',')"
          :options="{url: 'data-x'}"
        >
          <template v-for="(src,index) in form.contractPics.split(',')">
            <img
              style="width:100px;height:100px;margin-right:10px; margin-bottom:10px; border:1px solid #eee"
              :src="`${src}?x-oss-process=image/resize,h_100`"
              :data-x="src"
              :key="index"
              v-if="src"
            />
          </template>
        </viewer>
      </a-card>
      <a-modal
        v-model="visible"
        title="保险费"
        :body-style="{padding:'40px 40px 20px 20px'}"
        :width="650"
        centered
        @cancel="insuranceCancel"
        @ok="insuranceOk"
        destroyOnClose
      >
        <a-form-model-item label="货值（元/箱）" prop="payableInsuranceAmount">
          <a-input v-model="form.payableInsuranceAmount" @change="calcTotalPrice" />
        </a-form-model-item>
        <a-form-model-item label="选择保险公司" prop="payableInsuranceId">
          <a-select v-model="form.payableInsuranceId" style="width:100%" @select="insuranceSelect">
            <a-select-option value>请选择</a-select-option>
            <a-select-option
              v-for="(item,index) in insuranceList"
              :key="index"
              :value="item.custId"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="保险费率"
        >{{this.form.payableInsuranceRate}}{{this.form.payableInsuranceRate ? '%': ''}}</a-form-model-item>
        <a-form-model-item label="保险金额（元/箱）">{{calcResult}}</a-form-model-item>
      </a-modal>
      <!-- 审核不通过 -->
      <a-modal
        title="审核不通过"
        :body-style="{padding:'24px 50px 24px 0'}"
        centered
        width="600px"
        :visible="notPassVisible"
        :confirm-loading="confirmLoading"
        @ok="notPassOk"
        @cancel="notPassCancel"
      >
        <a-row style="margin-bottom:15px">
          <a-col :span="20" :offset="4">如果判定为审核不通过，订单将打回给销售重新填写，请你填写审核不通过的原因，方便销售修改后重新提交审核。</a-col>
        </a-row>
        <a-form-model-item
          label="原因"
          prop="auditRemark"
          :label-col="{span:4}"
          :wrapper-col="{span:20}"
        >
          <a-input
            v-model="form.auditRemark"
            type="textarea"
            :max-length="200"
            :auto-size="{ minRows: 5, maxRows: 5 }"
          />
        </a-form-model-item>
      </a-modal>
    </a-form-model>
    <div class="creat_button">
      <a-button
        type="primary"
        @click="pass"
        :loading="btnStatus"
        style="float:right;margin-top:12px"
      >通过</a-button>
      <a-button type="danger" ghost @click="notPass" style="float:right;margin:12px 20px 0 0">不通过</a-button>
    </div>
    <!-- 箱号，封号modal -->
    <boxInfo :visible="boxVisible" :size="boxSize" :data="boxData" @setVisible="setBoxData" />
  </div>
</template>
<script>
import {mixin} from '@/common/common'
import { queryBaseAreaList, getLatestRate } from '@/api'
import {
  getOrderInfoById,
  queryCustNameList,
  queryPortNameList,
  queryContainerTypeList,
  queryCustInsuranceDown
} from '@/api/salesCenter'
import { auditOrderInfo } from '@/api/orderCenter'
import _ from 'lodash/debounce'
import moment from 'moment'
import 'viewerjs/dist/viewer.css'
import boxInfo from './exportInfoModal'
// import boxInfo from './boxInfoModal'

const fomrMessage = `必填项不能为空`
export default {
  props: ['id'],
  mixins: [mixin],
  data () {
    this.onSearch2 = _(this.onSearch2, 800)
    this.onSearch3 = _(this.onSearch3, 800)
    return {
      dateFormat: 'YYYY-MM-DD HH:mm',
      basePath: '/orderCenter',
      routes: [
        {
          path: '/orderReview',
          breadcrumbName: '订单审核 '
        },
        {
          path: '',
          breadcrumbName: '审核详情'
        }
      ],
      receiveList: [], // 2
      payList: [], // 3
      containerList: [],
      portList: [],
      options: [],
      handlerList: [],
      insuranceList: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      selectObj: {},
      form: {
        sellerId: 1, // 模拟
        // 基础信息
        custId: '',
        containerTypeId: '',
        goodsName: '',
        settlementType: '',
        orderType: '',
        containerNum: '',
        invoiceType: '',
        taxRate: '',
        handlerId: '',
        // 费用信息
        receivableCustAmount: '',
        receivableCustCurrency: 'CNY', // 应收币种 CNY USD
        receivableShipAmount: '',
        receivableShipId: '',
        payableShipAmount: '',
        payableShipCurrency: 'CNY',
        payableStartTruckAmount: '',
        payableEndTruckAmount: '',
        payableInsuranceId: '', // 保险公司id
        payableInsuranceRate: '', // 保险费率
        payableInsuranceAmount: '', // 货值
        payableShipId: '',
        payableStartTruckId: '',
        payableEndTruckId: '',
        // 合同
        contractPics: '',
        // 运输信息
        transportTerms: 'DO-DO',
        startPortId: '',
        consignor: '',
        consignorProvince: '',
        consignorCity: '',
        consignorArea: '',
        consignorAddress: '',
        consignorPhone: '',
        endPortId: '',
        consignee: '',
        consigneePhone: '',
        consigneeProvince: '',
        consigneeCity: '',
        consigneeArea: '',
        consigneeAddress: '',
        loadingTime: '',
        sellerRemark: '',
        consigneeTitle: ''
      },
      rules: {
        custId: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        containerTypeId: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        goodsName: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        settlementType: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        orderType: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        containerNum: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        invoiceType: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        taxRate: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        handlerId: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        receivableCustAmount: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        // receivableShipAmount: [
        //   { required: true, message: fomrMessage, trigger: 'blur' }
        // ],
        // receivableShipId: [
        //   { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        // ],
        contractPics: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        transportTerms: [
          { required: true, message: fomrMessage, trigger: 'change' }
        ],
        startPortId: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        consignor: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        consignorProvince: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        consignorAddress: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        consignorPhone: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        endPortId: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        consignee: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        consigneeProvince: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        consigneeAddress: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        consigneePhone: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        loadingTime: [
          { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        ],
        consigneeTitle: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ]
        // payableInsuranceAmount: [
        //   { required: true, message: fomrMessage, trigger: 'blur' }
        // ],
        // payableInsuranceId: [
        //   { required: true, message: fomrMessage, trigger: ['blur', 'change'] }
        // ]
      },
      visible: false,
      insuranceIndex: undefined,
      insuranceRate: undefined,
      calcResult: '',
      rate: '',
      totalReceive: 0, // 总应收
      totalPay: 0, // 总应付
      totalProfit: 0, // 毛利
      boxVisible: false,
      boxSize: undefined,
      boxData: [],
      notPassVisible: false,
      btnStatus: false,
      confirmLoading: false
    }
  },
  methods: {
    momentDate (date, format) {
      return moment(date)
    },
    latestRateRequest (e) {
      getLatestRate(e)
        .then(res => {
          // // console.log(res.data)
          this.rate = res.data.rate
        })
        .catch(rs => {})
    },
    orderInfoRequest (e) {
      getOrderInfoById(e)
        .then(res => {
          this.form = res.data
          this.boxSize = res.data.containerNum
          if (res.data.payableInsuranceAmount) {
            this.calcResult = (
              (res.data.payableInsuranceAmount *
                res.data.payableInsuranceRate) /
              100
            ).toFixed(2)
          }
          // // console.log(res.data)
          this.$nextTick(() => {
            this.moneyChange()
          })
        })
        .catch(rs => {})
    },
    custNameListRequest (e, type) {
      queryCustNameList(e)
        .then(res => {
          if (type === 2) {
            this.receiveList = res.data
          } else if (type === 3) {
            this.payList = res.data
          }
        })
        .catch(rs => {})
    },
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
        })
        .catch(rs => {})
    },
    queryAddress () {
      queryBaseAreaList({})
        .then(res => {
          this.options = res.data
        })
        .catch(rs => {})
    },
    containerListRequest (e) {
      queryContainerTypeList(e)
        .then(res => {
          this.containerList = res.data
        })
        .catch(rs => {})
    },
    insuranceListRequest (e) {
      queryCustInsuranceDown(e)
        .then(res => {
          this.insuranceList = res.data
        })
        .catch(rs => {})
    },
    auditOrderRequest (e, type) {
      // // console.log(JSON.stringify(e))
      if (type === 1) {
        this.btnStatus = true
      } else if (type === 2) {
        this.confirmLoading = true
      }
      auditOrderInfo(e)
        .then(res => {
          // console.log(res)
          if (res.code === 0) {
            this.$message.success('操作成功！')
            setTimeout(() => {
              if (type === 1) {
                this.btnStatus = true
              } else if (type === 2) {
                this.confirmLoading = true
              }
              this.$router.push({
                path: '/orderCenter/orderReview'
              })
            }, 800)
          }
        })
        .catch(rs => {
          if (type === 1) {
            this.btnStatus = true
          } else if (type === 2) {
            this.confirmLoading = true
          }
        })
    },
    onSearch2 (searchText) {
      this.custNameListRequest(
        {
          status: 1,
          nameLike: searchText,
          belongCompany: 'JIA_HUA',
          custTypeLike: 'SUPPLIER',
          isReceivable: 1
        },
        2
      )
    },
    onSelect2 (val, option) {
      this.form.receivableShipId = this.receiveList[option.key].id
    },
    onSearch3 (searchText) {
      this.custNameListRequest(
        {
          status: 1,
          nameLike: searchText,
          belongCompany: 'JIA_HUA',
          custTypeLike: 'SUPPLIER',
          isPayable: 1
        },
        3
      )
    },
    onSelect3 (val, option) {
      this.form.payableShipId = this.payList[option.key].id
    },
    onSelect4 (val, option) {
      this.form.payableStartTruckId = this.payList[option.key].id
    },
    onSelect5 (val, option) {
      this.form.payableEndTruckId = this.payList[option.key].id
    },
    showModal () {
      this.visible = true
    },
    insuranceSelect (val, option) {
      // console.log(val)
      // console.log(option.key)
      this.insuranceIndex = option.key
      this.insuranceRate = this.insuranceList[option.key].insuranceRate
      this.form.payableInsuranceRate = this.insuranceList[option.key].insuranceRate
      this.calcTotalPrice()
    },
    calcTotalPrice () {
      let price = Number(this.form.payableInsuranceAmount)
      if (this.form.payableInsuranceRate) {
        let insuranceRate = Number(this.form.payableInsuranceRate)
        if (!isNaN(price) && !isNaN(insuranceRate)) {
          this.calcResult = ((price * insuranceRate) / 100).toFixed(2)
        } else {
          this.calcResult = ''
        }
        this.moneyChange()
      }
    },
    insuranceOk () {
      if (
        this.form.payableInsuranceId &&
        this.form.payableInsuranceRate &&
        this.form.payableInsuranceAmount
      ) {
        this.visible = false
      } else {
        this.$message.error('填写信息有误！')
        return false
      }
    },
    insuranceCancel () {
      if (!this.calcResult) {
        this.calcResult = ''
        this.insuranceIndex = undefined
        this.insuranceRate = undefined
        this.form.payableInsuranceId = ''
        this.form.payableInsuranceRate = ''
        this.form.payableInsuranceAmount = ''
      }
    },
    moneyChange () {
      // totalReceive
      // // console.log('应收客户（元/箱）：' + this.form.receivableCustAmount)
      // // console.log('应收海船费用(元/箱)：' + this.form.receivableShipAmount)
      // totalPay
      // // console.log('应付海船费用(元/箱)：' + this.form.payableShipAmount)
      // // console.log('始拖车费（元/箱）：' + this.form.payableStartTruckAmount)
      // // console.log('终拖车费（元/箱）：' + this.form.payableEndTruckAmount)
      // // console.log('保险费（元/箱）：' + this.calcResult)
      // totalProfit = totalReceive - totalPay
      // 总的应收
      let receivableCustAmount = this.form.receivableCustAmount
      if (this.form.receivableCustCurrency === 'USD') {
        receivableCustAmount = receivableCustAmount * this.rate
      }
      if (!isNaN(this.form.receivableShipAmount)) {
        this.totalReceive =
          receivableCustAmount + this.form.receivableShipAmount
      } else {
        this.totalReceive = receivableCustAmount
      }
      // 总的应付
      let payableShipAmount = this.form.payableShipAmount
      if (this.form.payableShipCurrency === 'USD') {
        payableShipAmount = payableShipAmount * this.rate
      }
      if (this.calcResult.length > 0) {
        this.totalPay =
          payableShipAmount +
          this.form.payableStartTruckAmount +
          this.form.payableEndTruckAmount +
          Number(this.calcResult)
      } else {
        this.totalPay =
          payableShipAmount +
          this.form.payableStartTruckAmount +
          this.form.payableEndTruckAmount
      }
      this.totalProfit = this.totalReceive - this.totalPay
    },
    editContainerNo () {
      this.boxVisible = true
    },
    setBoxData (e) {
      // console.log(e)
      this.boxVisible = false
      if (e) {
        this.boxData = e
      }
    },
    notPassOk () {
      if (!this.form.auditRemark) {
        this.$message.error('请输入订单审核不通过的原因！')
        return false
      }
      let _s = this
      let orderInfoList = _s.boxData
      orderInfoList.forEach(v => {
        v.orderId = _s.id
      })
      _s.auditOrderRequest({
        ..._s.form,
        id: _s.id,
        status: 4,
        orderShipInfoList: orderInfoList
      }, 2)
    },
    notPassCancel () {
      this.notPassVisible = false
    },
    pass () {
      let _s = this
      // if (_s.boxData.length === 0) {
      //   _s.$message.error('请填写箱号、封号！')
      //   return false
      // }
      let orderInfoList = _s.boxData
      orderInfoList.forEach(v => {
        v.orderId = _s.id
      })
      // // console.log(orderInfoList)
      let _form = _s.form
      let payableShipAmount =
        _form.payableShipAmount || _form.payableShipAmount === 0
      let payableShipId = _form.payableShipId
      let payableStartTruckAmount =
        _form.payableStartTruckAmount || _form.payableStartTruckAmount === 0
      let payableStartTruckId = _form.payableStartTruckId
      let payableEndTruckAmount =
        _form.payableEndTruckAmount || _form.payableEndTruckAmount === 0
      let payableEndTruckId = _form.payableEndTruckId
      if (
        (!payableShipAmount && payableShipId) ||
        (payableShipAmount && !payableShipId)
      ) {
        _s.$message.error('应付 海船费用、海船公司信息不完整！')
        return false
      }
      if (
        (!payableStartTruckAmount && payableStartTruckId) ||
        (payableStartTruckAmount && !payableStartTruckId)
      ) {
        _s.$message.error('应付 始拖车费、始拖车公司信息不完整！')
        return false
      }
      if (
        (!payableEndTruckAmount && payableEndTruckId) ||
        (payableEndTruckAmount && !payableEndTruckId)
      ) {
        _s.$message.error('应付 终拖车费、终拖车公司信息不完整！')
        return false
      }
      _s.$refs.form.validate(valid => {
        if (valid) {
          _s.auditOrderRequest(
            {
              ..._s.form,
              id: _s.id,
              status: 2,
              orderShipInfoList: orderInfoList
            },
            1
          )
        }
      })
    },
    notPass () {
      let _s = this
      // if (_s.boxData.length === 0) {
      //   _s.$message.error('请填写箱号、封号！')
      //   return false
      // }
      _s.$refs.form.validate(valid => {
        if (valid) {
          this.notPassVisible = true
        }
      })
    }
  },
  mounted () {
    this.latestRateRequest({})
    this.orderInfoRequest({
      id: this.id
    })
    this.custNameListRequest(
      {
        status: 1,
        nameLike: '',
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        isReceivable: 1
      },
      2
    )
    this.custNameListRequest(
      {
        status: 1,
        nameLike: '',
        belongCompany: 'JIA_HUA',
        custTypeLike: 'SUPPLIER',
        isPayable: 1
      },
      3
    )
    this.containerListRequest({
      status: 1
    })
    this.portListRequest({
      status: 1
    })
    this.queryAddress()
    this.insuranceListRequest({
      belongCompany: 'JIA_HUA'
    })
  },
  components: {
    boxInfo
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin: 0px 24px 24px 24px;
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 30px;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .iconTextMix {
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 20px 0;
    padding-left: 24px;
    img {
      width: 25px;
      height: 25px;
    }
    span {
      font-size: 14px;
      margin-left: 10px;
      line-height: 25px;
      font-weight: bold;
    }
  }
  .clickOnlyInput {
    height: 32px;
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }
  .borderframe {
    border: 1px solid #f0f0f0;
    border-top: none;
    margin: 0 50px;
  }
  .border {
    padding: 24px;
    border-top: 1px solid #f0f0f0;
    border-radius: 4px;
  }
  .calcList {
    text-align: center;
    margin-left: 24px;
    span.moneyCss {
      color: orange;
      font-size: 24px;
      margin-left: 5px;
    }
  }
}
.ant-col-12 {
  padding-right: 50px;
}
.yewu_photo .ant-form-item {
  margin-bottom: 0;
}
.borderframe .ant-form-item {
  margin-bottom: 2px;
}
.YunSHU {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  padding: 15px 24px 15px 0;
  background: url(../../../static/images/border-r.png) no-repeat right;
  background-size: 1px 100%;
}
.calcList .ant-card {
  margin: 0;
}
</style>
<style lang="less">
.teroer1 .ant-descriptions-item-colon {
  float: left;
  width: 40%;
  text-align: right;
}
.calcList .sale_yf .ant-card-bordered {
  border-left: none;
  border-right: none;
}
.calcList_1 .ant-card-head-title {
  padding: 5px 0;
  margin-top: 3px;
}
.calcList_1 .ant-card-head {
  padding: 0;
  background: #f0f0f0;
  min-height: 42px;
}
.calcList_1 .ant-card-head {
  border-top: 4px solid #cf1322;
}
.sale_yf .ant-card-head {
  border-top: 4px solid #faad14;
}
.sale_ml .ant-card-head {
  border-top: 4px solid #7cb305;
}
.calcList_1 .ant-card-body {
  padding: 16px 0;
}
</style>
